<%@page import="java.util.ArrayList"%>
<%@page import="com.winexpress.sr.SalesReport"%>
<%@page import="java.util.List"%>
<%@page import="com.winexpress.util.SessionAttributes"%>
<%@taglib prefix="t" tagdir="/WEB-INF/tags" %>
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link href="/WineXpressClient/resources/css/morris.css" rel="stylesheet" type="text/css" />
        <title>wineXpress online shop</title>        
    </head>
    <body>
        <t:adminNavigation/>
        <br/><br/>
        <div class="container">
            <center>
                <h2>Overall Sales Report</h2>
                <table class="table table-bordered" style="width:70%;" >
                    <thead>
                        <tr>
                            <th>Year</th>
                            <th>Sales</th>                    
                        </tr>
                    </thead>
                    <tbody>         
                        <%  SalesReport[] list = (SalesReport[]) request.getAttribute("salesList");%>
                        <% for (int i = 0; i < list.length; i++) {%>
                        <tr>
                            <td> <%=list[i].getYr()%> </td>
                            <td><%=list[i].getSales()%></td>      
                        </tr>   
                        <%}%>
                    </tbody>
                </table>
            </center>
            <div style="width: 100%; margin-left: 10%;">            
                <div class="row">
                    <div class="col-md-5">
                        <!-- BAR CHART -->
                        <div class="box box-success">
                            <div class="box-header">
                                <h3 class="box-title">Yearly Sales - Bar Chart</h3>
                            </div>
                            <div class="box-body chart-responsive">
                                <div class="chart" id="bar-chart" style="height: 300px;"></div>
                            </div><!-- /.box-body -->
                        </div>                    
                    </div>
                    <div class="col-md-5">
                        <!-- LINE CHART -->
                        <div class="box box-info">
                            <div class="box-header">
                                <h3 class="box-title">Yearly Sales - Line Chart</h3>
                            </div>
                            <div class="box-body chart-responsive">
                                <div class="chart" id="line-chart" style="height: 300px;"></div>
                            </div><!-- /.box-body -->
                        </div><!-- /.box -->
                    </div>
                </div>
            </div>
            <!-- jQuery 2.0.2 -->
            <!--    <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>-->
            <!-- Bootstrap -->
            <!--    <script src="/WineXpressClient/resources/js/bootstrap.min.js" type="text/javascript"></script>-->
            <!-- Morris.js charts -->
            <script src="//cdnjs.cloudflare.com/ajax/libs/raphael/2.1.0/raphael-min.js"></script>
            <script src="/WineXpressClient/resources/js/morris.min.js" type="text/javascript"></script>
            <script type="text/javascript">
                $(function() {
                    "use strict";
                    //            BAR CHART
                    var bar = new Morris.Bar({
                        element: 'bar-chart',
                        resize: true,
                        data: [
                            {year:${y2}, sales:${y2s}},
                            {year:${y1}, sales:${y1s}},
                            {year:${y0}, sales:${y0s}}
                        ],
                        barColors: ['#f56954'],
                        xkey: 'year',
                        ykeys: ['sales'],
                        labels: ['Sales'],
                        hideHover: 'auto'
                    });

                    // LINE CHART
                    var line = new Morris.Line({
                        element: 'line-chart',
                        resize: true,
                        data: [
                            {year:${y2}, sales:${y2s}},
                            {year:${y1}, sales:${y1s}},
                            {year:${y0}, sales:${y0s}}
                        ],
                        xkey: 'year',
                        ykeys: ['sales'],
                        labels: ['Sales'],
                        lineColors: ['#3c8dbc'],
                        hideHover: 'auto',
                        parseTime: false
                    });
                });
            </script>
        </div>
        <t:footer/>
    </body>
</html>
